<template>
  <div class="pd-10 flex-tb-center" style="flex-direction: row-reverse">
    <div class="inline-block z-index-999" style="margin-left: 13px">
      <el-avatar
      shape="square"
        src=" https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      />
    </div>
    <div class="yj-reverse">
      <div class="inline-block pd-10">
        sdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="ReveiverMsg">
</script>

<style scoped>
.yj-reverse::after {
  content: "";
  border-top: 12px solid rgba(0, 0, 0, 0);
  border-bottom: 12px solid rgba(0, 0, 0, 0);
  border-left: 12px solid #f0f8ff;
  border-right: 12px solid rgba(0, 0, 0, 0);
  display: inline-block;
  position: absolute;
  right: -22px;
  top: 23%;
}
.yj-reverse {
  position: relative;
}
.yj-reverse > div {
  word-break: break-all;
  background: #f0f8ff;
  border-radius: 8px;
}
</style>